<template>
	<view class="">
		<u-tr v-for="(child,childIndex) in gongzhong" :key="childIndex">
			<u-td width="40%">{{child.gongzhongname}}</u-td>
			<u-td width="20%">
				<!-- 	{{child.price?child.price:0}} -->
				<input type="text" v-model="child.price" style="
	  			border: solid 1rpx #F4A460;
	  			width: 60px;padding: 1px;
	  			border-radius: 5px;height: 10px;
	  			color: #F4A460;
	  			">
			</u-td>

			<u-td width="20%"   >{{child.num}}</u-td>
			<u-td width="20%">{{child.total?child.total:0}}</u-td>
		</u-tr>
	</view>
</template>

<script>
	export default {
		name: "MyBtn",
		props: {
			gongzhong: {
				type: Array,

				default () {
					return []
				}
			},
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {};
		},
		watch: {
			gongzhong: {
				handler(val, oldval) {
					var that =this;
					var total = 0;
		            for (var i = 0; i < val.length; i++) {
						val[i]['total'] = val[i]['price'] * val[i]['num']
						total+=val[i]['total']
		            	 
		            }
		 
					this.btnClick(total);
					this.gongzhong= val;
					 
				},
				deep: true
			},
		},
       
		methods: {
			btnClick(total) {
				 this.$emit('on_total', total)
			
			}
		}

	}
</script>

<style lang="scss" scoped>
	.btn {
		margin: 50rpx auto;
		background: #B00E0E;
	}
</style>